<!DOCTYPE html>

<html>
    
    <head>
        <meta charset=UTF-8>
        <title>TM Scroller | demo02</title>
        <style>
            body {
                width: 5000px;
                height: 5000px;
            }
            
            .wrap {
                margin-left: 800px;
                margin-top: 500px;
            }
            .box-wrap {
                display: -webkit-box;
                display: -moz-box;
                display: -o-box;
                display: -ms-box;
                display: box;
            }
            
            div.box {
                margin: 20px;
                width: 320px;
                height: 240px;
                border: 1px solid black;
                
                cursor: pointer;
            }
        </style>
        
        <script type="text/javascript" src="../tm.scroller.js"></script>
        <script>
            var tm = tm || {};
            var setCSSValue = function(element, name, value)
            {
                element.style[name] = value+"px";
                // var cssValue = element.style.getPropertyCSSValue(name);
                // cssValue.setFloatValue(CSSPrimitiveValue.CSS_PX, value);
            };
            
            var getCSSValue = function(element, name)
            {
                var cssValue = document.defaultView.getComputedStyle(element, '').getPropertyCSSValue(name);
                return cssValue.getFloatValue(CSSPrimitiveValue.CSS_PX);
            };
        </script>
        
        <script>
            var $id = tm.$id;
            var $query = tm.$query;
            var $queryAll = tm.$queryAll;
            var Scroller = tm.Scroller;

            window.onload = function()
            {
                // ボックスリストを取得
                var box_list = $queryAll(".box");
                
                for (var i=0; i<box_list.length; ++i) {
                    // カレントボックス
                    var box = box_list[i];
                    box.scrolledToggle = false;
                    box.scrolledColor  = "hsl(" + (360/box_list.length)*i + ", 75%, 50%)";
                    // ネクストボックス
                    box.nextBox = box_list[i+1];
                    
                    // クリックイベントを登録
                    box.onclick = scrollToNextBox;
                }
                
            };
            
            /**
             * 次のボックスへスクロール
             */
            var scrollToNextBox = function(e)
            {
                var self = this;
                // トグルをスウィッチして背景色を変更
                this.scrolledToggle = this.scrolledToggle==false;
                self.style.backgroundColor = (this.scrolledToggle) ? this.scrolledColor : "transparent";
                
                // ボックスの中心位置をセット
                pos = {};
                pos.x = this.offsetLeft - innerWidth/2  + getCSSValue(this, "width")/2;
                pos.y = this.offsetTop  - innerHeight/2 + getCSSValue(this, "height")/2;
                // スクロール開始
                Scroller.to(pos, 500, function(){
                    // // 背景色をデフォルトに戻す
                    // self.style.backgroundColor = "transparent";
                    // 次のボックスがあればそれのクリックイベントをディスパッチする
                    if (self.nextBox) self.nextBox.onclick();
                }, true);
            }
        </script>
    </head>
    <body>
        <h1>TM Scroller | demo02</h1>
        <p>ボックスをクリックするとスクロールが始まります.</p>
        
        <div class="wrap">
            <div class="box-wrap">
                <div class="box"></div>
                <div class="box"></div>
                <div class="box"></div>
                <div class="box"></div>
            </div>
            <div class="box-wrap">
                <div class="box"></div>
                <div class="box"></div>
                <div class="box"></div>
                <div class="box"></div>
            </div>
            <div class="box-wrap">
                <div class="box"></div>
                <div class="box"></div>
                <div class="box"></div>
                <div class="box"></div>
            </div>
            <div class="box-wrap">
                <div class="box"></div>
                <div class="box"></div>
                <div class="box"></div>
                <div class="box"></div>
            </div>
        </div>
        
    </body>
</html>